<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线考试系统 - 考试管理</title>
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/all.min.css">
    <style>
        :root {
            --primary: #4361ee;
            --secondary: #3f37c9;
            --teacher-accent: #4361ee;
            --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            --transition: all 0.3s ease;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f5f7fb;
            color: #333;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .navbar {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 0.8rem 1rem;
        }

        .navbar-brand {
            font-weight: 700;
            font-size: 1.5rem;
            display: flex;
            align-items: center;
        }

        .navbar-brand i {
            margin-right: 10px;
            font-size: 1.8rem;
        }

        .nav-link {
            color: rgba(255, 255, 255, 0.85) !important;
            font-weight: 500;
            padding: 0.5rem 1rem !important;
            border-radius: 4px;
            margin: 0 3px;
            transition: var(--transition);
        }

        .nav-link:hover, .nav-link.active {
            background-color: rgba(255, 255, 255, 0.15);
            color: white !important;
        }

        .main-content {
            flex: 1;
            padding: 2rem 0;
        }

        .page-header {
            background: white;
            border-radius: 15px;
            padding: 1.5rem;
            box-shadow: var(--card-shadow);
            margin-bottom: 2rem;
            position: relative;
            overflow: hidden;
        }

        .page-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 5px;
            height: 100%;
            background-color: var(--teacher-accent);
        }

        .exam-card {
            background: white;
            border-radius: 12px;
            box-shadow: var(--card-shadow);
            transition: var(--transition);
            margin-bottom: 1.5rem;
        }

        .exam-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        }

        .exam-header {
            padding: 1.25rem;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .exam-body {
            padding: 1.25rem;
        }

        .exam-footer {
            padding: 1rem 1.25rem;
            background-color: #f8f9fa;
            border-top: 1px solid rgba(0, 0, 0, 0.05);
            border-radius: 0 0 12px 12px;
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--teacher-accent), #3a0ca3);
            border: none;
            padding: 0.5rem 1.5rem;
            font-weight: 600;
            border-radius: 8px;
            transition: var(--transition);
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(67, 97, 238, 0.4);
        }

        .status-badge {
            padding: 0.5rem 1rem;
            border-radius: 20px;
            font-weight: 600;
            font-size: 0.875rem;
        }

        .status-not-started {
            background-color: #e3f2fd;
            color: #1976d2;
        }

        .status-in-progress {
            background-color: #fff3e0;
            color: #f57c00;
        }

        .status-completed {
            background-color: #e8f5e9;
            color: #388e3c;
        }

        .footer {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: white;
            padding: 2rem 0;
            margin-top: auto;
        }
    </style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark">
    <div class="container">
        <a class="navbar-brand" href="/teacher/home">
            <i class="fas fa-chalkboard-teacher"></i>在线考试系统
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav me-auto">
                <li class="nav-item">
                    <a class="nav-link" href="/home/manage"><i class="fas fa-home"></i> 主页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" href="/exam/manage"><i class="fas fa-tasks"></i> 考试管理</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/teacher/question/manage"><i class="fas fa-book"></i> 题库管理</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/teacher/score/analysis"><i class="fas fa-chart-bar"></i> 成绩分析</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<!-- 主内容区域 -->
<div class="main-content">
    <div class="container">
        <div class="page-header">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h2 class="mb-0">考试管理</h2>
                    <p class="text-muted mb-0">管理您的所有考试</p>
                </div>
                <a href="/exam/create" class="btn btn-primary">
                    <i class="fas fa-plus me-2"></i>创建新考试
                </a>
            </div>
        </div>

        <!-- 考试列表 -->
        <div class="row">
            <div class="col-12" th:each="exam : ${exams}">
                <div class="exam-card" style="cursor: pointer;" th:onclick="'window.location.href=\'/exam/' + ${exam.examId} + '\''">
                    <div class="exam-header">
                        <div>
                            <h4 class="mb-1" th:text="${exam.examName}">考试名称</h4>
                            <p class="text-muted mb-0">
                                <span th:text="${exam.courseName}">课程名称</span> | 
                                <span th:text="${exam.examType}">考试类型</span>
                            </p>
                        </div>
                        <div th:class="${'status-badge ' + 
                            (exam.status == 0 ? 'status-not-started' : 
                             exam.status == 1 ? 'status-in-progress' : 'status-completed')}"
                             th:text="${exam.status == 0 ? '未开始' : 
                                     exam.status == 1 ? '进行中' : '已结束'}">
                            状态
                        </div>
                    </div>
                    <div class="exam-body">
                        <div class="row">
                            <div class="col-md-3">
                                <p class="mb-1"><i class="fas fa-clock me-2"></i>考试时长</p>
                                <strong th:text="${exam.duration + '分钟'}">120分钟</strong>
                            </div>
                            <div class="col-md-3">
                                <p class="mb-1"><i class="fas fa-calendar me-2"></i>开始时间</p>
                                <strong th:text="${#temporals.format(exam.startTime, 'yyyy-MM-dd HH:mm')}">2025-06-10 09:00</strong>
                            </div>
                            <div class="col-md-3">
                                <p class="mb-1"><i class="fas fa-calendar-check me-2"></i>结束时间</p>
                                <strong th:text="${#temporals.format(exam.endTime, 'yyyy-MM-dd HH:mm')}">2025-06-10 11:00</strong>
                            </div>
                            <div class="col-md-3">
                                <p class="mb-1"><i class="fas fa-star me-2"></i>总分</p>
                                <strong th:text="${exam.totalScore + '分'}">100分</strong>
                            </div>
                        </div>
                    </div>
                    <div class="exam-footer">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <span class="text-muted">创建教师：</span>
                                <span th:text="${exam.teacherName}">张老师</span>
                            </div>
                            <div>
                                <button th:if="${exam.status == 0}" class="btn btn-success me-2" th:onclick="'publishExam(\'' + ${exam.examId} + '\'); event.stopPropagation();'">
                                    <i class="fas fa-paper-plane me-1"></i>发布
                                </button>
                                <button class="btn btn-outline-danger" th:onclick="'deleteExam(\'' + ${exam.examId} + '\'); event.stopPropagation();'">
                                    <i class="fas fa-trash me-1"></i>删除
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 页脚 -->
<footer class="footer">
    <div class="container text-center py-4">
        <a href="https://gitee.com/sorrymaker04/onlineexam-workload" target="_blank"><i class="fab fa-github fa-2x"></i></a>
        <div class="copyright mt-2">
            &copy; 2025 版权所有 北城在线考试系统小组 12 Team
        </div>
    </div>
</footer>

<!-- Bootstrap JS -->
<script src="/js/bootstrap.bundle.min.js"></script>
<script>
function deleteExam(examId) {
    if (confirm('确定要删除这个考试吗？此操作不可恢复！')) {
        fetch(`/exam/${examId}`, {
            method: 'DELETE',
            headers: {
                'Content-Type': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert(data.message);
                window.location.reload();
            } else {
                alert(data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('删除考试失败，请稍后重试');
        });
    }
}

function publishExam(examId) {
    if (confirm('确定要发布这个考试吗？发布后将自动为相关学生创建考试记录，学生将可以参加考试！')) {
        fetch(`/exam/${examId}/publish`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert(data.message);
                window.location.reload();
            } else {
                alert(data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('发布考试失败，请稍后重试');
        });
    }
}
</script>
</body>
</html> 